<template>
	<div>
		<div id="eg">
			<IframeLoad ref="iframe" :src="src" @load="loadFn"/>
			<iButton type="primary" @click="clickFn">执行任务</iButton>
		</div>
		<ApiTable :data="data" :bind="this"/>
		<CodeShow :code="code"/>
	</div>
</template>

<script>
	import ApiTable from './tools/ApiTable';
	import IframeLoad from '../components/IframeLoad';
	export default{
		name:'IframeLoadEG',
		components:{
			ApiTable,
			IframeLoad
		},
		data(){
			return {
				src:require('../assets/test.s.html').default,
				data:[
					{
						title:'属性',
						value:[
							{name:'src',info:'加载链接',type:'String'}
						]
					},{
						title:'事件',
						type:true,
						value:[
							{name:'load',info:'iframe加载完成',type:'Window'}
						]
					},{
						title:'方法',
						type:true,
						value:[
							{name:'runTask',info:'尽早的执行任务',type:'Function(Window)'}
						]
					}
				]
			};
		},
		computed:{
			code(){
				return `
<template>
	<IframeLoad ref="iframe" :src="src" @load="loadFn"/>
	<iButton type="primary" @click="clickFn">执行任务</iButton>
</template>
<script>
	export default{
		data:function(){
			return {
				src:'test.html'
			};
		},
		methods:{
			loadFn:function(window){
				window.document.body.insertAdjacentHTML('beforeend','<p>初始化任务...</p>');
			},
			clickFn:function(){
				this.$refs.iframe.runTask(function(window){
					window.document.body.insertAdjacentHTML('beforeend','<p>执行任务...</p>');
				})
			}
		}
	};
</${'script'}>
`;
			}
		},
		methods:{
			loadFn(window){
				window.document.body.insertAdjacentHTML('beforeend','<p>初始化任务...</p>');
			},
			clickFn(){
				this.$refs.iframe.runTask(function(window){
					window.document.body.insertAdjacentHTML('beforeend','<p>执行任务...</p>');
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	#eg{
		margin:20px;
		>iframe{
			border:1px solid;
			outline:0;
			vertical-align:bottom;
			height:250px;
		}
		>button{
			margin-left:20px;
		}
	}
</style>
